<template>
  <div class="search">
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline"
             size="mini">
      <el-form-item label="抵港起止时间">
        <el-date-picker v-model="dateRange"
                        type="daterange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width:250px">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="船舶名称">
        <el-select v-model="formInline.vessels"
                   clearable
                   filterable
                   placeholder="请选择船舶名称"
                   style="width:150px">
          <el-option v-for="item in vslIdList"
                     :key="item.id"
                     :label="item.cnname"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.checkStatus"
                   clearable
                   placeholder="请选择状态"
                   style="width:150px">
          <el-option v-for="item in statusList"
                     :key="item.value"
                     :label="item.name"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   style="background-color:#043AA7"
                   @click="search">查询</el-button>
        <el-button type="info"
                   plain
                   @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'planSearch',
  components: {},
  data() {
    return {
      formInline: {},
      dateRange: null,
      vslIdList: [],
      statusList: [
        {
          name: '待审核',
          value: 0,
        },
        {
          name: '审核通过',
          value: 1,
        },
        {
          name: '审核未通过',
          value: 2,
        },
        {
          name: '预报',
          value: 3,
        },
        {
          name: '下发失败',
          value: 4,
        },
        {
          name: '取消',
          value: 5,
        },
        {
          name: '确报',
          value: 6,
        },
        {
          name: '在港',
          value: 7,
        },
        {
          name: '离港',
          value: 8,
        },
      ],
    }
  },

  methods: {
    //船舶名称
    vessles() {
      this.$api
        .vessles({
          cstShippingline: JSON.parse(localStorage.getItem('userInfo')).customerCode,
          termCode: '',
        })
        .then((res) => {
          this.vslIdList = res.data.data
        })
        .catch((err) => {})
    },
    search() {
      console.log(this.formInline, this.dateRange)
      if (this.dateRange) {
        this.formInline.etaMin = this.dateRange[0]
        this.formInline.etaMax = this.dateRange[1]
      } else {
        this.formInline.etaMin = ''
        this.formInline.etaMax = ''
      }
      this.$emit('search', this.formInline)
    },
    onReset() {
      this.dateRange = []
      this.formInline = {etaMin:"",etaMax:"",vessels:"",checkStatus:""}
      this.$emit('search',this.formInline)
    },
  },

  computed: {},

  mounted() {
    this.vessles()
  },
}
</script>
<style lang='scss' scoped>
:deep .el-form-item {
  margin-bottom: 10px;
}
</style>